// @flow
import React, { Component } from 'react';
import Icon from 'react-icon-base';
import './ProcessBar.scss';

type Props = { d: string };

class ProcessBar extends Component<Props> {
  /**
   * 计算Xy坐标
   * @param  {[type]} r      [半径]
   * @param  {[type]} angel  [角度]
   * @param  {[type]} origin [原点坐标]
   * @return {[Array]} 坐标
   */
  evaluateXY = (r: number, angel: number, origin: Array<number>) => {
    return [origin[0] + Math.sin(angel) * r, origin[0] - Math.cos(angel) * r];
  };
  d = (startX: number, startY: number, r: number, angel: number) => {
    const endX = 50 + Math.sin(angel) * r;
    const endY = 50 - Math.cos(angel) * r;
    return [`M ${startX},${startY} A ${r},${r} 0 0 1 ${endX},${endY}`, endX, endY];
  };
  render() {
    return (
      <div className="process-bar">
        <Icon viewBox="0 0 100 100">
          {/* <circle cx="50" cy="50" r="40" stroke="red" strokeWidth="10" fill="none" /> */}
          <path stroke="red" strokeWidth="10" d={this.d(50, 5, 45, 1)[0]} />
          <path
            stroke="black"
            strokeWidth="10"
            d={this.d(this.d(50, 5, 45, 1)[1], this.d(50, 5, 45, 1)[2], 45, 3)[0]}
          />
          {/* <path id="arc1" fill="none" stroke="black" strokeWidth="20" d={this.props.d} /> */}
        </Icon>
      </div>
    );
  }
}

export default ProcessBar;
